<template>
    <div class="result">
        <transition name="fade">
            <div v-if="!showQr">
                <img v-if="result" class="success" src="../assets/p3/success.png" >
                <img v-else class="fail" src="../assets/p3/fail.png" >
                <img class="enter" @click="showQr = true" src="../assets/p3/enter.png">
            </div>
        </transition>
        <transition name="scale-in">
            <img v-if="showQr" class="qrcode" src="../assets/p3/qrcode.png">
        </transition>
    </div>
</template>

<script>
export default {
    name: "result",
    data() {
        return {
            result: true,
            showQr: false,
        };
    },
    methods: {

    },
    components: {
    },
    created() {
        // 获取结果
        this.result = this.$route.params.result;
    }
};
</script>
<style lang="scss" scoped>
.result {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/p2/common_bg.jpg") no-repeat;
    background-size: 100%;
    .success, .fail{
        width: 3.96rem;
        position: absolute;
        left: 0;right:0;
        top: 3rem;
        margin: auto;

    }
    .enter{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 1.36rem;
        top: 7.6rem;
    }

    .qrcode{
        position: absolute;
        left: 0;
        right: 0;
        top: 3.6rem;
        margin: auto;
        width: 2.48rem;
    }

    .scale-in-enter-active,
    .scale-in-leave-active {
        transition: all 1s ease;
        transform: scale(1);
    }
    .scale-in-enter,
    .scale-in-leave-active {
        transform: scale(0);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 1s ease;
        opacity: 1;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
}
</style>
